<template>
  <div class="vuex">
    {{count}}--{{name}}
    <br>
    <!-- <button @click="$store.commit('INC',{num:1})">+</button>&emsp; -->
    <button @click="INC({num:1})">+</button>&emsp;
    <!-- <button @click="$store.commit('dec')">-</button> -->
    <button @click="dec(1)">-</button>
    <hr>
    {{countA}}--{{countGA}}
    <hr>
    {{countB}}--{{countGB}}
  </div>
</template>

<script>
// 引入辅助函数
import { mapState, mapMutations,mapActions,mapGetters } from "vuex";
// import {createNamespacedHelpers} from 'vuex';
// console.log(createNamespaceHelpers());
// const {mapState} =  createNamespacedHelpers('moduleA')
export default {
  data() {
    return {};
  },
  mounted(){
    console.log(this.$store);
    this.incA()
    this.incB()
    this.rootA()
    this.acB()
    this.asyncIncA()
  },
  methods: {
    ...mapMutations(["INC", "dec"]),
    ...mapMutations('moduleA',["incA"]),
    ...mapMutations('moduleB',["incB"]),
    ...mapActions('moduleA',["asyncIncA", "asyncDecA",'rootA']),
    ...mapActions('moduleB',["asyncIncB", "asyncDecB",'acB']),
  },
  computed: {
    ...mapState('moduleA',['countA']),
    ...mapState('moduleB',['countB']),
    // 对象展开运算符
    ...mapState(["count", "name"]),
    ...mapGetters('moduleA',['countGA']),
    ...mapGetters('moduleB',['countGB'])
    // 计算属性
    // count(){
    //     return this.$store.state.count
    // },
    // name(){
    //     return this.$store.state.name
    // }
  }
  // 辅助函数
  // computed:mapState({
  //     count:store=>store.count,
  //     name:store=>store.name
  // })
  // 字符串数组
  //computed:mapState(['count','name'])
};
</script>

<style>
.vuex {
  text-align: center;
  margin: 50px auto 0;
  font-size: 24px;
}
</style>
